<template>
	<view class="attbox">
		<view style="height: 100rpx;text-align: center;">
			<view class="banter">
				<image class="booor" src="../../static/imges/zuo.png" mode=""></image>
				<view class="huan">房源列表</view>
				<view @click="changeModel"  class="all">编辑/取消</view>
			</view>
		</view>
		<view>
			<me-select ref="meSelect" @change="change" @finish="finish" @itemClick="itemClick" :datalist="dataList" :options="options">
				<view slot-scope="slot" class="item">
					<view class="botteer">
						<image class="box" src="../../static/imges/details1.png" mode=""></image>
						<view style="margin-left: 20rpx;">
							<view class="box4">泰禹云开壹品</view>
							<view class="box5" style="width: 350rpx;height: 40rpx;">发布时间:2020-03-22 23:00</view>
							<view class="box6" style="margin-left: 10rpx;color: #027FC5;">雨花区·芙蓉中路雨花亭</view>
							<view class="butde">
								<text style="font-weight: 600;">￥4300</text><text class="box7">万元/月</text>
							</view>
						</view>
						<image class="bue" v-show="flag" src="../../static/imges/sh.png" mode=""></image>
					</view>
					<view>{{slot.slotScope.item.id}}</view>
				</view>
			</me-select>
		</view>
	</view>
</template>

<script>
	import meSelect from '@/components/me-select/me-select.vue'
	export default {
		data() {
			return {
				flag:true,
				options: {
					flags: ['id'], //设置需要返回的参数这个参数必须在 dataList 中的item中存在（不配置默认全部返回）
					itemCanSelect: true //是否开启点击列表页选择配置
				},
				dataList: [{
						// id: "1",
						select: false
					},
					{
						// id: "2",
						select: false
					},
					{
						// id: "3",
						select: false
					},
				]
			}
		},
		components: {
			meSelect
		},
		methods: {
			attre() {

			},
			changeModel() {
				this.$refs.meSelect.changeModel()
				this.flag = !this.flag
			},
			itemClick(e) {
				console.log('列表点击了：', e)
			},
			finish(e) {
				console.log('所有的选择：', e)
			},
			change(e) {
				console.log('发生改变了：', e)
			}
		},
		mounted() {}
	}
</script>

<style>
	.booor {
		width: 35rpx;
		height: 40rpx;
		position: relative;
		top: 30rpx;
	}

	.banter {
		width: 100%;
		position: fixed;
		display: flex;
		height: 100rpx;
		line-height: 90rpx;
		margin: 0 0 0 20rpx;
		background-color: #fff;
		z-index: 999;
	}

	.bott {
		width: 100%;
		height: 30rpx;
		background-color: #F4F4F4;
	}

	.box {
		width: 250rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.botteer {
		display: flex;
		margin-top: 30rpx;
		height: 230rpx;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.box6,
	.box7 {
		font-size: 12rpx;
		margin-top: 20rpx;
	}

	.box5 {
		font-size: 26rpx;
		margin-top: 15rpx;
		color: #BCBCBC;
	}

	.butde {
		margin-top: 15rpx;
		color: #C92B29;
	}

	.all {
		position: absolute;
		text-align: center;
		width: 160rpx;
		left: 73%;
	}

	.huan {
		position: absolute;
		width: 150rpx;
		left: 50%;
		margin-left: -75rpx;
		font-weight: 600;
	}
	.bue{
		margin-left: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}
</style>
